<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');

        /*
            圆锥渐变需要调用ctx的createConicGradient方法
                传入三个参数：第一个是角度，也就是从哪里开始渐变，从圆心点开始水平向右为0度, 其他角度记得用Math.PI来计算
                                        第二个是圆心的位置x，第三个是位置y。
        */ 
        let conic = ctx.createConicGradient(0,400,300)
        conic.addColorStop(0,'#a18cd1');
        conic.addColorStop(1,'#fbc2eb');
        ctx.fillStyle = conic;
        ctx.fillRect(0,0,800,600);
    </script>
</body>
</html>